<template>
	<div class="content">
		<el-table highlight-current-row :data="dataList" @row-click="handleClick">
			<el-table-column prop="songName" label="歌曲" />
			<el-table-column prop="singerName" label="歌手" />
			<el-table-column prop="introduction" label="专辑" />
			<el-table-column label="编辑" width="80" align="center">
				<template #default="scope">
					<el-dropdown>
						<el-icon @click="handleEdit(scope.row)"><MoreFilled /></el-icon>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item
									:icon="Download"
									@click="
										download(`http://www.atwx.xyz:8030/download?song=${scope.row.url}`)
										// download(
										// 	`http://www.atwx.xyz:8030/download?song=/song/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E7%A8%BB%E9%A6%99.mp3`
										// )
										// () => {

										// 	window.open(`http://www.atwx.xyz:8030/download?song=${scope.row.songUrl}`);
										// }

										// downloadMusic1('download', '/song/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E7%A8%BB%E9%A6%99.mp3')
										// downloadMusic({
										// 	songUrl: scope.row.url,
										// 	songName: scope.row.name,
										// })
									"
									>下载</el-dropdown-item
								>
								<el-dropdown-item :icon="Delete" v-if="show" @click="deleteCollection({ id: scope.row.id })"
									>删除</el-dropdown-item
								>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, toRefs, computed, reactive } from "vue";
import { useStore } from "vuex";
import mixin from "@/mixins/mixin";
import { MoreFilled, Delete, Download } from "@element-plus/icons-vue";
import { HttpManager } from "@/api";
import { Icon } from "@/enums";

export default defineComponent({
	components: {
		MoreFilled,
	},
	props: {
		songList: Array,
		show: {
			default: false,
		},
	},
	emits: ["changeData"],
	setup(props) {
		const { getSongTitle, getSingerName, playMusic, checkStatus, downloadMusic } = mixin();
		const { downloadMusic1 } = HttpManager;
		const { proxy } = getCurrentInstance();
		const store = useStore();

		const { songList } = toRefs(props);

		const iconList = reactive({
			dislike: Icon.Dislike,
			like: Icon.Like,
		});

		const songUrl = computed(() => store.getters.songUrl);
		const singerName = computed(() => store.getters.singerName);
		const songTitle = computed(() => store.getters.songTitle);
		const dataList = computed(() => {
			const list = [];
			songList.value.forEach((item: any, index) => {
				item["songName"] = getSongTitle(item.name);
				item["singerName"] = getSingerName(item.name);
				item["index"] = index;
				list.push(item);
			});
			return list;
		});

		function handleClick(row) {
			playMusic({
				id: row.id,
				url: row.url,
				pic: row.pic,
				index: row.index,
				name: row.name,
				lyric: row.lyric,
				currentSongList: songList.value,
			});
		}

		function handleEdit(row) {
			console.log("row", row);
		}
		function download(url) {
			window.open(url)
			// window.open(url);
		}
		const userId = computed(() => store.getters.userId);

		async function deleteCollection({ id }) {
			if (!checkStatus()) return;

			const result = (await HttpManager.deleteCollection(userId.value, id)) as ResponseBody;
			(proxy as any).$message({
				message: result.message,
				type: result.type,
			});

			if (result.data === false) proxy.$emit("changeData", result.data);
		}

		return {
			dataList,
			iconList,
			Delete,
			Download,
			songUrl,
			singerName,
			songTitle,
			handleClick,
			handleEdit,
			downloadMusic,
			deleteCollection,
			downloadMusic1,
			download,
		};
	},
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/var.scss";
@import "@/assets/css/global.scss";

.content {
	background-color: $color-white;
	border-radius: $border-radius-songlist;
	padding: 10px;
}

.content:deep(.el-table__row.current-row) {
	color: $color-black;
	font-weight: bold;
}

.content:deep(.el-table__row) {
	cursor: pointer;
}

.icon {
	@include icon(1.2em, $color-black);
}
</style>
